<template>
  <a-form-model
        ref="ruleFormRef"
        :model="form"
        :rules="rules"
        style="width: 100%;"
    >
        <a-form-model-item prop="account">
            <a-input
                v-model.trim="form.account"
                size="large"
                placeholder="请输入用户名"
                :maxLength="24"
                class="phone-input"
            >
                <a-icon slot="prefix" type="user" />
            </a-input>
        </a-form-model-item>
        <div style="padding-top: 10px">
          <a-button @click="cancel">取消</a-button>
          <a-button @click="doConfirm" style="margin-left: 10px;" type="primary">确定</a-button>
        </div>
    </a-form-model>
</template>

<script>
import Regex from "@/utils/regex"
import { commonValidate } from "@/utils/util"
import { ACCOUNT_TIPS, ACCOUNT_EMPTY_TIPS } from "@/utils/consts"

export default {
  name: "accountChange",
  components: {},
  props: {
    type: {
      type: String,
      default: ''
    },
    cancel: {
      type: Function,
      default: () => () => {}
    },
    confirm: {
      type: Function,
      default: () => () => {}
    }
  },
  data() {
    return {
      form: {
        account: ''
      },
      rules: {
        account: [
          {
            required: true,
            trigger: "blur",
            validator: this.onCheckAccount
          }
        ]
      }
    }
  },
  methods: {
    // 校验账号
    onCheckAccount(rule, value, callback) {
      if (!value) {
        callback(ACCOUNT_EMPTY_TIPS)
        return;
      }
      if (!Regex.account.test(value)) {
        callback(ACCOUNT_TIPS)
        return;
      }
      callback()
    },
    async doConfirm() {
      const confirmValidate = await commonValidate(this.$refs.ruleFormRef)
      if (!confirmValidate) return
      this.confirm(this.form)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
